<template>
  <div>
    <ContentTable>
      <template #menu>
        <div class="menus">
          <div class="menus-item">
            <div class="menus-items">
              <el-select v-model="inf.value" @change="getChange" placeholder="请选择" style="width: 140px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <!-- <el-input v-model="inf.key" placeholder="输入关键字" clearable :suffix-icon="Search" /> -->
            </div>
            <!-- <div class="block">
              <el-date-picker v-model="inf.DataTime" type="daterange" clearable range-separator="-" start-placeholder="活跃开始时间" end-placeholder="活跃结束时间" />
            </div> -->
            <el-button type="primary" @click="getData">搜索</el-button>
          </div>
        </div>
      </template>
      <div class="EChartsBar">
        <charts></charts>
      </div>
    </ContentTable>
  </div>
</template>
<script lang="ts" setup>
import charts from './echarts.vue'
import { Search } from '@element-plus/icons-vue'
import { ref } from 'vue'
const inf = ref({
  value: '',
  key: '',
  DataTime: '',
  page: 1,
  size: 10,
})
const options = [
  {
    value: '0',
    label: '数据分布',
  },
  {
    value: '1',
    label: '段位',
  },
  {
    value: '2',
    label: '活跃人数',
  },
  {
    value: '3',
    label: '总场次',
  },
]
const getData = () => {
  let _inf = JSON.parse(JSON.stringify(inf.value))
  console.log(_inf)
  // userApi.usersGet({ params: _inf }).then((res) => {
  //   const { code = 0, msg, data } = res
  //   if (code === 200) {
  //     inf_res.value = data
  //   }
  // })
}
const getChange = (value: string) => {

}
</script>
<style lang="scss" scoped>
.menus {
  padding: 20px;
  display: flex;
  align-items: center;
  .menus-item {
    display: flex;
    align-items: center;
    gap: 10px;
    .menus-items {
      display: flex;
    }
  }
  
}
.EChartsBar {
  width: 100%;
  height: 600px;
}
</style>
